<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <!-- 
    段落样式主要设置段落的样式

    1. text-decoration：文本装饰
          值有： • 下划线：underline
                • 删除线：line-through
                • 上划线：overline
                • 不添加任何装饰：none
                可添加多个文本修饰，多个修饰之间用空格隔开。

    2.text-transform：文本大小写（针对英文）            
        值有： • 小写：lowercase
              • 大写：uppercase
              • 只针对每个单词的首字母大写：capitalize

    3.text-indent：文本缩进
        1)主要针对首行缩进，值是number px ，例如32px，
        2)一般我们都是首行缩进2个字，单元由于每个字的大小会变，每次都要计算，所以引进了em单位
          em单位：是一个相对单位，1em永远都和字体大小（font-size）相同。但如果一段文字中出现了英文，字体仍然比较难对齐。

    4.text-align：文本对齐方式
      值有： left、right、center、justify（两端点对齐）

    5.line-height：定义行高  (注意，行高可以写到font的复合样式种)
          行高指的是 字体高度+与上下字之间一半
          默认行高：不是固定值，而是根据当前字体的大小不断变化的
          值： 1. number px 如：20px
               2. number    已文字大小为比例尺， 行高= number*文字高度  比如现在font-size=16px    1 就是说明行高是1*16=16px ，2 就是32的行高，支持小数

    6.letter-spacing： 字间距
          值的话就是 number px

    7.word-spacing：定义词间距（针对英文）
           值的话就是 number px

    8. 强制折行（针对英文、阿拉伯数字）
          对于超长的英文单词或者是一串数字，默认情况下是不折行的，导致会超出范围，这是可以用下面2种方式进行折行处理
          • word-break: break-all; 非常强烈的折行
          • word-wrap: break-word; 不是那么强烈的折行，可能会产生一些空白的区域


   -->
   
   <style>
    div{
      width: 300px;
      height: 300px;
      border-color: red;
      border-style: solid;
      border-width: 2px;

    }

    p {

      /* text-decoration: underline line-through overline; */
      
      /* text-transform: lowercase; */
      /* text-transform: uppercase; */
      /* text-transform: capitalize; */

      /* text-indent: 2em; */
      /* text-indent: 32px; */

      /* text-align: center; */
      /* text-align: left; */
      /* text-align: right; */
      /* text-align: justify;  */

      line-height: 1.5;

      /* letter-spacing: 1px; */

      /* word-spacing: 10px; */

      /* word-break: break-all; */

      word-wrap: break-word;
      
    }

   </style>


</head>
<body>

  <div>
    <p>这是一段中文内容这是一段中文内容这是一段中文内容这是一段中文内容这是一段中文内容这是一段中文内容</p>
    <p>this aiJSJDSEDSWDASWEDSWEDLFESDFEDSFRWESDFedfrewdfjtrej a enGlish text this is a enGlish text this is a enGlish text this is a english tExt this is a english text</p>
  </div>
  
  

</body>
</html>